<template>
  <el-card class="upload-card">
    <h2>上传 Excel 文件</h2>

    <!-- 文件上传提示 -->
    <el-alert
      title="只能上传 .xlsx 文件"
      type="warning"
      show-icon
      class="file-warning"
    />
    <el-alert
      title="填写的所有内容不能为空。"
      type="warning"
      show-icon
      class="content-warning"
    />
    <el-alert
      title="时间格式：2024-09-05 08:22:07"
      type="info"
      show-icon
      class="time-format-info"
    />

    <!-- 文件上传按钮 -->
    <el-upload
      class="upload-excel"
      :before-upload="beforeUpload"
      :on-change="handleFileChange"
      :auto-upload="false"
      :show-file-list="false"
      accept=".xlsx"
    >
      <el-button type="primary">选择 Excel 文件</el-button>
    </el-upload>

    <!-- 显示文件名和后缀 -->
    <div v-if="fileName" class="file-info">
      <p>文件名: {{ fileName }}</p>
      <p>文件后缀: {{ fileExtension }}</p>
    </div>

    <!-- 上传按钮 -->
    <el-button
      v-if="file"
      type="success"
      @click="submitData"
      class="submit-btn"
      :loading="uploading"
    >
      {{ uploading ? '上传中...' : '上传到服务器' }}
    </el-button>

    <!-- 上传成功或失败的提示 -->
    <el-alert
      v-if="uploadSuccess"
      title="上传成功！"
      type="success"
      show-icon
      :closable="false"
      style="margin-top: 20px"
    />
    <el-alert
      v-if="uploadError"
      title="上传失败，请重试。"
      type="error"
      show-icon
      :closable="false"
      style="margin-top: 20px"
    />
  </el-card>
</template>

<script>
import { importingPatient } from '@/api/nurse/patient_list'; // 导入导出接口

export default {
  data() {
    return {
      file: null,
      fileName: '',
      fileExtension: '',
      uploading: false,
      uploadSuccess: false,
      uploadError: false
    };
  },
  methods: {
    // 文件类型验证
    beforeUpload(file) {
      const isXlsx = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isXlsx) {
        this.$message.error('只能上传 .xlsx 文件');
        return false; // 阻止上传不合法的文件
      }
      return true;
    },

    // 处理文件选择，获取文件名和后缀
    handleFileChange(file) {
      this.file = file.raw;
      this.fileName = file.name;
      this.fileExtension = file.name.split('.').pop();
    },

    // 提交数据到服务器
    async submitData() {
      this.uploading = true;
      this.uploadSuccess = false;
      this.uploadError = false;

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        // 使用 importingPatient 接口进行文件上传
        await importingPatient(formData);
        this.uploadSuccess = true;
      } catch (error) {
        this.uploadError = true;
        console.error("上传失败：", error);
      } finally {
        this.uploading = false;
      }
    }
  }
};
</script>

<style scoped>
.upload-card {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
}

.upload-excel {
  margin-bottom: 20px;
}

.file-info {
  margin: 20px 0;
  font-size: 16px;
}

.submit-btn {
  display: block;
  margin: 20px auto;
}

.el-alert {
  margin-top: 10px;
}

.file-warning, .content-warning, .time-format-info {
  margin-bottom: 15px;
}
</style>
